<div>
    <!-- navbar header -->
    <div class="navbar-header {{app.settings.navbarHeaderColor}}" ng-class="isSmart?'app-top':''">
        <!--<div ui-sref="app.system.userofme" class="dropdown hide-navbar-collapse visible-xs pull-right maxWidth-400" style="margin:7px 7px 0 17px;" dropdown>-->
            <!--<a href class="dropdown-toggle clear" dropdown-toggle>-->
                <!--<span class="thumb-sm avatar pull-right">-->
                    <!--<img id="userH" ng-src="{{currentUser.headImageUrl}}" alt="..." style="width:36px;height:36px">-->
                    <!--<span class="vip grade" ng-if="currentUser._doctor.isContractedDoctor"></span>-->
                    <!--<span class="paid grade" ng-if="currentUser._doctor.isPaidDoctor"></span>-->
                <!--</span>-->
            <!--</a>-->
        <!--</div>-->
        <div ui-sref="app.system.userofme" class="dropdown hide-navbar-collapse visible-xs pull-right maxWidth-400" dropdown>
            <a href class="dropdown-toggle clear" dropdown-toggle style="padding:0px 15px;line-height: 40px">
                <span class="thumb-sm avatar pull-right" style="height:40px;">
                    <img id="userH" ng-src="{{currentUser.headImageUrl}}" alt="..." style="width:36px;height:36px;margin:2px;vertical-align:top;">
                    <span class="vip grade" ng-if="currentUser._doctor.isContractedDoctor"></span>
                    <!--paid-->
                    <span class="paid grade" ng-if="currentUser._doctor.isPaidDoctor"></span>
                </span>
            </a>
        </div>
        <button class="pull-right visible-xs" ui-toggle-class="show" data-target=".navbar-collapse">
            <i class="glyphicon glyphicon-cog"></i>
        </button>
        <button class="pull-right visible-xs" ng-click="openChat()">
            <i class="icon-bell fa-fw"></i>
            <span class="badge badge-sm bg-danger" style="margin:-10px -10px 10px;" ng-if="notes.count>0">{{ notes.count }}</span>
        </button>
        <button ui-sref="app.tasks" dropdown-toggle class="dropdown-toggle pull-right visible-xs">
            <i class="icon-layers"></i>
            <span class="badge badge-sm bg-danger" style="margin:-10px -10px 10px;" ng-if="taskSummary.total>0">{{ taskSummary.total }}</span>
        </button>
        <button class="pull-right visible-xs" ui-toggle-class="off-screen" data-target=".app-aside" ui-scroll="app">
            <i class="glyphicon glyphicon-align-justify"></i>
        </button>
        <!-- brand -->
        <a href="#/" class="navbar-brand text-lt">
            <i class="fa fa-ambulance"></i>
            <img src="images/logo.png" alt="." class="hide">
            <span class="hidden-folded m-l-xs maxWidth-500" translate="header.navbar.app">Referral</span>
            <!--<span class="hidden-folded m-l-xs" translate="header.navbar.appUAT" ng-if="isPrdServer == false">UAT</span>-->
        </a>
        <!-- / brand -->
    </div>
    <!-- / navbar header -->

    <!-- navbar collapse -->
    <div class="collapse pos-rlt navbar-collapse box-shadow {{app.settings.navbarCollapseColor}}" ng-class="isSmart?'app-top':''" style="line-height: 40px">
        <!-- buttons -->
        <div class="nav navbar-nav hidden-xs">
            <a href class="no-shadow" ng-click="app.settings.asideFolded = !app.settings.asideFolded" style="margin:0 10px;">
                <i class="fa {{app.settings.asideFolded ? 'fa-indent' : 'fa-dedent'}} fa-fw"></i>
            </a>
        </div>
        <!-- / buttons -->

        <!-- buttons -->
        <div class="nav navbar-nav hidden-sm hide-navbar-collapse maxWidth-768">
            <a href class="no-shadow" ng-click="app.settings.asideDock=false" style="margin:0 10px;">
                <i class="icon-control-pause"></i>
                <span translate="header.navbar.dashboard1">Aside Fix</span>
            </a>

            <a href class="no-shadow" ng-click="app.settings.asideDock=true" style="margin:0 10px;">
                <i class="icon-credit-card"></i>
                <span translate="header.navbar.dashboard2">Aside Dock</span>
            </a>

        </div>
        <!-- / buttons -->

        <!-- nabar right -->
        <ul class="nav navbar-nav navbar-right">

            <li class="dropdown hide-navbar-collapse hidden-xs">
                <a ui-sref="app.tasks" class="dropdown-toggle" dropdown-toggle style="padding:0px 15px;line-height: 40px">
                    <i class="icon-layers"></i>
                    <span translate="header.navbar.tasks">Tasks</span>
                    <span class="badge badge-sm up bg-danger pull-right-xs" ng-if="taskSummary.total>0">{{taskSummary.total}}</span>
                </a>
            </li>

            <!--聊天-->
            <li class="dropdown hide-navbar-collapse hidden-xs">
                <a ng-click="openChat()" style="padding:0px 15px;line-height: 40px">
                    <i class="icon-bell fa-fw"></i>
                    <span class="visible-xs-inline">
                        <span translate="header.navbar.myMessage">My Message</span>
                    </span>
                    <span class="badge badge-sm up bg-danger pull-right-xs" ng-if="notes.count>0">
                        {{ notes.count }}
                    </span>
                </a>
            </li>

            <li class="dropdown" is-open="lang.isopen" dropdown>
                <a href class="dropdown-toggle" dropdown-toggle style="padding:0px 15px;line-height: 40px">
                    {{selectLang}} <b class="caret"></b>
                </a>
                <!-- dropdown -->
                <ul class="dropdown-menu animated fadeInRight w">
                    <li class="hide-navbar-collapse" ng-repeat="(langKey, label) in langs">
                        <a ng-click="setLang(langKey, $event)" href>{{label}}</a>
                    </li>
                </ul>
                <!-- / dropdown -->
            </li>
            <!--full screen-->
            <!--<li class="hidden-xs">-->
            <!--<a ui-fullscreen></a>-->
            <!--</li>-->


            <li class="dropdown" ng-if="">
                <a ui-sref="app.system.notifications" class="dropdown-toggle" dropdown-toggle style="padding:0px 15px;line-height: 40px">
                    <i class="icon-bell fa-fw"></i>
                    <span class="visible-xs-inline"><span translate="header.navbar.myMessage">My Message</span></span>
                    <span class="badge badge-sm up bg-danger pull-right-xs"
                          ng-if="notes.count>0">{{ notes.count }}</span>
                </a>
            </li>

            <li class="dropdown" dropdown>
                <a ui-sref="app.setting" class="dropdown-toggle" dropdown-toggle style="padding:0px 15px;line-height: 40px">
                    <i class="icon-wrench"></i>
                    <span class="visible-xs-inline"><span translate="setting.title">Setting</span></span>
                </a>
                <ul class="dropdown-menu animated fadeInRight w">
                    <li data-stopPropagation="true">
                        <div class="panel-body" style="color:#4B4B4B">
                            <div class="m-b-sm">
                                <label class="i-switch bg-info pull-right hide-navbar-collapse">
                                    <input type="checkbox" ng-model="app.settings.headerFixed">
                                    <i></i>
                                </label>
                                <span translate="setting.fixedHeader">Fixed header</span>
                            </div>
                            <div class="m-b-sm">
                                <label class="i-switch bg-info pull-right hide-navbar-collapse">
                                    <input type="checkbox" ng-model="app.settings.asideFixed">
                                    <i></i>
                                </label>
                                <span translate="setting.fixedAside">Fixed aside</span>
                            </div>
                            <div class="m-b-sm">
                                <label class="i-switch bg-info pull-right hide-navbar-collapse">
                                    <input type="checkbox" ng-model="app.settings.asideFolded">
                                    <i></i>
                                </label>
                                <span translate="setting.foldedAside">Folded aside</span>
                            </div>
                            <div class="m-b-sm">
                                <label class="i-switch bg-info pull-right hide-navbar-collapse">
                                    <input type="checkbox" ng-model="app.settings.asideDock">
                                    <i></i>
                                </label>
                                <span translate="setting.dockAside">Dock aside</span>
                            </div>
                            <div>
                                <label class="i-switch bg-info pull-right hide-navbar-collapse">
                                    <input type="checkbox" ng-model="app.settings.container">
                                    <i></i>
                                </label>
                                <span translate="setting.boxedLayout">Boxed layout</span>
                            </div>
                        </div>
                        <div class="wrapper" style="border-top:1px solid #CCC">
                            <button type="button" class="btn col-sm-12 btn-primary hide-navbar-collapse"
                                    style="font-size:12px;"
                                    ng-click="app.settings.navbarHeaderColor='bg-primary';
          				app.settings.navbarCollapseColor='bg-white-only';
          				app.settings.asideColor='bg-dark'">
                                <span translate="setting.defaultStyle">Default Style</span></button>
                            <button type="button" class="btn col-sm-12 btn-danger hide-navbar-collapse"
                                    style="font-size:12px"
                                    ng-click="app.settings.navbarHeaderColor='bg-danger';
          				app.settings.navbarCollapseColor='bg-white-only';
          				app.settings.asideColor='bg-dark';">
                                <span translate="setting.redStyle">Red Style</span></button>
                            <button type="button" class="btn col-sm-12 btn-info hide-navbar-collapse"
                                    style="font-size:12px"
                                    ng-click="app.settings.navbarHeaderColor='bg-info dker';
          				app.settings.navbarCollapseColor='bg-info dk';
          				app.settings.asideColor='bg-black';">
                                <span translate="setting.blueStyle">Blue Style</span></button>
                            <div style="clear:both"></div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="dropdown hide-navbar-collapse">
                <a ui-sref="app.about" class="dropdown-toggle" dropdown-toggle style="padding:0px 15px;line-height: 40px">
                    <i class="icon-info"></i>
                    <span class="visible-xs-inline"><span translate="header.navbar.about">About</span></span>
                </a>
            </li>

            <li ui-sref="app.system.userofme" class="dropdown hide-navbar-collapse width-400-768" dropdown>
                <a href class="dropdown-toggle clear" dropdown-toggle style="padding:0px 15px;line-height: 40px">
                    <span class="thumb-sm avatar pull-right" style="height:40px;">
                        <img id="userH" ng-src="{{currentUser.headImageUrl}}" alt="..." style="width:36px;height:36px;margin:2px;vertical-align:top;">
                        <!--<i class="busy md b-white bottom" ng-if="currentUser.isSystemAdmin"></i>-->
                        <!--<i class="away md b-white bottom" ng-if="!currentUser.isSystemAdmin && currentUser.isMedicalAdmin"></i>-->
                        <!--<i class="on md b-white bottom" ng-if="!currentUser.isMedicalAdmin && !currentUser.isSystemAdmin && currentUser.isDoctor"></i>-->
                        <!--<i class="off md b-white bottom" ng-if="!currentUser.isMedicalAdmin && !currentUser.isSystemAdmin && !currentUser.isDoctor"></i>-->
                        <!--vip-->
                        <span class="vip grade" ng-if="currentUser._doctor.isContractedDoctor"></span>
                        <!--paid-->
                        <span class="paid grade" ng-if="currentUser._doctor.isPaidDoctor"></span>
                    </span>
                    <span class="hidden-sm hidden-md" style="margin-right:10px;">{{currentUser.realName}}</span>
                </a>
            </li>
        </ul>
        <!-- / navbar right -->

    </div>
    <!-- / navbar collapse -->
</div>
<script>
    $(function () {
        $("ul.dropdown-menu").on("click", "[data-stopPropagation]", function (e) {
            e.stopPropagation();
        });
        $('.hide-navbar-collapse').click(function () {
            $('.navbar-collapse').removeClass('show');
        });
    });
</script>